<template>
<el-container class="container">
    <el-header class="header">
        <el-row class="header-row">
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <img src="../../assets/logo.png" alt="该图片无法显示">
                </div>
            </el-col>
            <el-col :span="19" class="middle">
                <div class="grid-content bg-purple-light">
                    <h3>电商后台管理系统</h3>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <a class="loginout" href="#"
                    @click.prevent="handleloginout()"
                    >退出</a>
                </div>
            </el-col>
        </el-row>
    </el-header>
    <el-container>
        <el-aside class="aside" width="200px">
            <el-menu
            :router="true"
            :unique-opened="true"
            class="el-menu-vertical-demo">

                <el-submenu :index=" ''+item1.order" v-for="(item1,i) in menusList" :key="i">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item1.authName}}</span>
                    </template>

                    <el-menu-item :index="''+item2.path" v-for="(item2,i) in item1.children" :key="i">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>{{item2.authName}}</span>
                        </template>
                    </el-menu-item>

                </el-submenu>

                </el-submenu>

            </el-menu>

        </el-aside>
        <el-main class="main">
            <router-view></router-view>
        </el-main>
    </el-container>
</el-container>
</template>

<script >
export default{
    data(){
        return{
            menusList:[]
        }
    },
   //判断是否已经登录过
    beforeCreate(){
        
    },
    created(){
        this.getMenus()
    },
    methods:{
       async getMenus(){
        const AUTH_TOKEN = localStorage.getItem('token')
        this.$http.defaults.headers.common['Authorization'] = AUTH_TOKEN
        const res = await this.$http.get('menus');
        //console.log(res);
        this.menusList = res.data.data;
        },
        handleloginout(){
            localStorage.removeItem('token')
            this.$message.success('退出成功')
            this.$router.push({name:'login'})
        }
    }

} 
</script>

<style >
  .container {
  height: 100%;
}

.header {
  background-color: #b3c0d1;
}
.header .middle{
    text-align: center;
}
.loginout{
    text-decoration: none;
    line-height: 62px;
}

.aside {
  background-color: #d3dce6;
  height: 100%;
}

.main {
  background-color: #e9eef3;
}  



</style>